<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<tag:head title="图书检索" ctx="${ctx}">
	<link href="${ctx}/assets/css/staff/staff_book_search/staff_book_search.css" rel="stylesheet">	<!-- 该页面特定的样式 -->
</tag:head>

<tag:body>
	<!-- 左 上 导航 -->
	<tag:nav ctx="${ctx}"></tag:nav>

	<!-- page content -->
	<div class="right_col" role="main">
		<div class="">
			<div class="clearfix"></div>

			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>图书检索</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form action="${ctx}/staff/bookSearch" method="post">
								<div class="col-sm-2">
									<select class="form-control">
										<option value="0" selected>书名</option>
										<option value="1">作者</option>
										<option value="2">出版社</option>
									</select>
								</div>
								<div class="col-sm-2">
									<select class="form-control" id="bookClass" name="bookClass">
										<c:forEach var="bookClass" items="${requestScope.bookClasses}">
											<option value="${bookClass.bookClassId}">${bookClass.name}</option>
										</c:forEach>
									</select>
								</div>
								<div class="col-sm-2">
									<select class="form-control" name="type">
										<option value="0" selected>精确查询</option>
										<option value="1">模糊查询</option>
									</select>
								</div>
								<div class="col-md-5 col-sm-5 col-xs-5 form-group pull-left top_search">
									<div class="input-group">
										<input type="text" class="form-control" name="bookName" autocomplete="off" placeholder="请输入关键字">
										<span class="input-group-btn">
                 				   			  <button id="search" class="btn btn-default" type="button"><i class="fa fa-search">搜索</i></button>
                 					  	</span>
										<ul id="hotSearch" class="dropdown-menu dropdown-menu-right" role="menu">
											<a href="hotKeyPage" class="">查看完整热搜榜»</a>
											<c:forEach var="search" varStatus="idx" items="${requestScope.searchs}" end="9">
												<c:choose>
													<c:when test="${idx.index == 0 || idx.index == 1 || idx.index == 2}">
														<li><a href="#" onclick="toSearchByHotKey(this)"><span class="badge bg-red">${idx.index + 1}</span>${search.searchKey}</a></li>
													</c:when>
													<c:otherwise>
														<li><a href="#" onclick="toSearchByHotKey(this)"><span class="badge">${idx.index + 1}</span>${search.searchKey}</a></li>
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</ul>
										<ul id="matchSearch" class="dropdown-menu dropdown-menu-right" role="menu"></ul>
									</div>
								</div>
							</form>
							<div class="col-md-4">
								<div class="x_panel">
									<div class="x_title">
										<h2><i class="fa fa-long-arrow-up">热门书籍</i><small><a href="hotBookPage?bookClassId=all">总榜</a></small></h2>
										<div class="clearfix"></div>
									</div>
									<div class="x_content">
										<ul class="list-unstyled top_profiles scroll-view">
											<c:forEach var="book" items="${requestScope.books}" begin="1" end="5">
												<li class="media event">
														<div class="media-body">
															<a class="pull-left user-profile">
																<img class="aero" src="${ctx}/${book.bookImage}" width="40px" height="40px" onclick="bookInfo(${book.bookId})"/>
															</a>
															<a class="title" href="javascript:void(0);" onclick="bookInfo(${book.bookId})">${book.name}</a>
															<p><strong>作者:</strong>${book.author}</p>
															<p> <small>浏览次数:${book.browseTimes}</small></p>
														</div>
													</li>
											</c:forEach>
										</ul>
									</div>
								</div>
							</div>
							<c:forEach var="bookClass" items="${requestScope.bookClasses}">
								<div class="col-md-4">
									<div class="x_panel">
										<div class="x_title">
											<h2><i class="fa fa-long-arrow-up">热门书籍</i><small><a href="hotBookPage?bookClassId=${bookClass.bookClassId}">${bookClass.name}</a></small></h2>
											<div class="clearfix"></div>
										</div>
										<div class="x_content">
											<ul class="list-unstyled top_profiles scroll-view">
												<c:forEach var="book" items="${requestScope.books}">
												<c:if test="${book.bookClass == bookClass}">
													<li class="media event">

														<div class="media-body">
															<a class="pull-left user-profile">
																<img class="aero" src="${ctx}/${book.bookImage}" width="40px" height="40px" onclick="bookInfo(${book.bookId})"/>
															</a>
															<a class="title" href="javascript:void(0);" onclick="bookInfo(${book.bookId})">${book.name}</a>
															<p><strong>作者:</strong>${book.author}</p>
															<p> <small>浏览次数:${book.browseTimes}</small></p>
														</div>
													</li>
											</c:if>
										</c:forEach>
											</ul>
										</div>
									</div>
								</div>
							</c:forEach>

						</div>

					</div>
				</div>

			</div>


		</div>
	</div>
	<!-- /page content -->

	<!-- footer content -->
	<tag:footer></tag:footer>
</tag:body>
<!-- javascript -->
<tag:javascript ctx="${ctx}">
	<!-- this page -->
	<script src="${ctx}/assets/js/staff/staff_book_search.js"></script>
	<script>
		<c:if test="${requestScope.error != null}">
			createPNotify("提示信息","error","${requestScope.error}");
		</c:if>

		<c:forEach var="search" items="${requestScope.searchs}" begin="0" end="0">
			$("div.top_search").children("div").children("input").attr("placeholder","大家都在搜:${search.searchKey}");
		</c:forEach>

		function matchKey(key) {
			$.ajax({
				type:'POST',//请求类型
				url:'getSearchsByKey',//请求地址
				contentType: 'application/json;',//发送信息至服务器时内容编码类型
				data:JSON.stringify({
					"searchKey":key,
				}),
				dataType:'JSON',/*预期服务器返回的数据类型*/
				success:function (json) {//成功获取到后台返回的值后，对后台返回的值做相应的一系列操作
					var $liObj;
					var searchs = json.data.searchs;
					for(var i = 0;i < searchs.length && i < 10;++i){
						$liObj = $("<li><a href='#' onclick='toSearchByMatchKey(this)'></a></li>");
						$liObj.children("a").text(searchs[i].searchKey);
						$("#matchSearch").append($liObj.clone());
					}
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
				},
				fail:function () { //如果在传输过程失败了：调用fail中对应的匿名函数(可选)
				},
				cache:true,
			});
		}
	</script>
</tag:javascript>
</html>
